<template>
    <div class="">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-message"></i>&nbsp;心情详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-form  label-width="160px">
                <el-form-item label="标题：">
                    <div>
                        {{dataDetail.title}}
                    </div>
                </el-form-item>
                <el-form-item label="封面图：">
                    <div>
                       <img :src="dataDetail.head_img" alt="" style="width:320px; height:160px;">
                    </div>
                </el-form-item>
                <el-form-item label="内容：">
                    <div v-html="dataDetail.content" style="width:800px;height:auto;">
                    </div>
                </el-form-item>
                <el-form-item label="合肥站：">
                    <div>
                        {{dataDetail.city_name}}
                    </div>
                </el-form-item>
                 <el-form-item label="审核状态：">
                    <div>
                        {{dataDetail.is_checked}}
                    </div>
                </el-form-item>
                <el-form-item label="阅读数：">
                    <div>
                        {{dataDetail.read_num}}
                    </div>
                </el-form-item>
                <!-- <el-form-item label="喜欢数：">
                    <div>
                        {{dataDetail.good_num}}
                    </div> -->
                <!-- </el-form-item> -->
                <el-form-item label="关键字：">
                    <div style="overflow:hidden">
                       <div style="float:left;margin-right:15px;" v-for="item in dataDetail.keywords" :key="item">
                            <el-tag>{{item}}</el-tag>
                        </div>
                    </div>
                </el-form-item>
        
                <el-form-item label="作者：">
                    <div>
                        {{dataDetail.author}}
                    </div>
                </el-form-item>
                 <el-form-item label="创建时间：">
                    <div>
                        {{dataDetail.create_time}}
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="returnList">返回列表</el-button>
                </el-form-item>
            </el-form>
        </div>
       
    </div>
</template>
<script>
import { moodLookDetail } from '@/api/mood/list'
export default {
    name:"topicDetails",
    data() {
        return {
            id:'', //详情id
            dataDetail:'',//数据
            imgList:[],//图集
            title:'',//标题
            pageIndex:1,
            pageSize:10,
        }
    },
    //实例创建
    created(){
        if(this.$route.query.id &&this.$route.query.id!=""){
            this.id = this.$route.query.id;
            this.getData();
        }else{
           this.$notify.info({title: '提示',message: '获取详情ID失败，请返回列表页重试！'});
        }
    },
    //方法
    methods: {
        //获取详情
       getData(){
            moodLookDetail(this.id).then((response)=> {
                console.log(response);
                if(response.code==200){
                    let Data = response.data;//当前返回的数据
                    this.dataDetail=Data;
                    this.dataDetail.keywords=JSON.parse(Data.keywords);
                  if(Data.is_checked==0){
                        this.dataDetail.is_checked='审核中'
                    }else if(Data.is_checked==1){
                        this.dataDetail.is_checked='审核不通过'
                    }else{
                        this.dataDetail.is_checked='审核通过'
                    }
                }else{
                    this.$notify.error({
                        title: '异常',
                        offset: 100,
                        message: response.msg
                    });
                }
            })
        },
        //返回列表
        returnList (){
          this.$router.go(-1);
        }
    }
}
</script>
<style lang="stylus" scoped>
    .el-form-item .el-cascader{
        width :400px;
    }
    .el-cascader-menus .el-cascader-menu{
        width :240px
    }
</style>


